<template>
  <div>
    <!-- {{props}}    
    --------------------------------------- -->
    <component :is="tagName" v-bind="props" v-model="testValue"></component>    
    <el-button @click="drawer = true" type="primary" style="margin-left: 16px;">
      编辑
    </el-button>
    <el-drawer
      title="编辑属性"
      :visible.sync="drawer"
      direction="rtl"
      :modal="false"
      @close="drawerClose"
      >
      <el-form v-model="tempvalue">          
        <el-form-item v-for="item in this.propconfig" :label="item.info" :key="item.propName">          
          <el-switch v-if="item.propType==='bool'" v-model="tempvalue[item.propName]"></el-switch>
          <el-select v-else-if="item.propType==='string' && item.options!=null" v-model="tempvalue[item.propName]">
            <el-option v-for="opt in item.options.split(',')" :key="opt" :label="opt" :value="opt">{{opt}}</el-option>
          </el-select>
          <el-input-number v-else-if="item.propType==='number'" v-model="tempvalue[item.propName]"></el-input-number>
          <el-input v-else v-model="tempvalue[item.propName]"></el-input>
        </el-form-item>
      </el-form>        
    </el-drawer>
  </div>
</template>

<script>
// 设置 显示方式 表单项控件的组件
import axios from 'axios'
// import StaticText from '../components/staticText.vue'
export default {
  // components:{validatorEditor },
  async created(){
    await this.load()
  },
  methods:{    
    async load(){
      // console.log(this.value);
      /**
       * 1、从库里读出当前组件下的所有可设置属性
       * 2、结合已保存的配置数据
       * 3、给对象赋值，如果没有值应该用默认值
       * 4、逻辑不完善需进一步修改
       * 5、最后把设置的值，以v-model方式让外部获得
       */
      axios.get("http://localhost:8811/api/ShowTypeComponente/GetOne/"+this.id).then(x=>{      
        this.tagName=x.data.result.component
        // console.log(this.tagName);
        this.propconfig=x.data.result.showTypeComponentPropties
        x.data.result.showTypeComponentPropties.forEach(element => {          
          var v=element.defaultValue          
          if(this.value==null || this.value==undefined || this.value=={}){
            v=element.defaultValue
          }
          else if (this.value=="" && element.propType=='bool'){
            v=element.defaultValue=='true'
          }
          else if (this.value=="" && element.propType=='number'){
            v=parseFloat(element.defaultValue)
          }
          else if (this.value=="" && element.propType=='string'){            
            v=element.defaultValue            
          }
          else{
            // console.log(element);
            var name=element.propName            
            var root=this.value
            if(root=="") return
            var arr=name.split('.')            
            arr.forEach(ele=>{              
              root=root[ele]
              // console.log(root);
            })            
            v=root
          }
          
          if(v!=null){
            if(element.propType==='bool'){
              if(typeof(v)!='boolean'){
                v=v=='false'?false:true
              }
            }
            else if (element.propType==='number'){              
              v=parseFloat(v)
            }
            else{
              // v=v.toString()
            }
          }
          this.$set(this.tempvalue,element.propName,v)        
        });      
      })
      
    },
    drawerClose(){
      this.$emit('input', this.props)
    }
  },
  watch:{
    id(){
      this.load()
    },
    value(){
      this.tempvalue=this.value
    },
    tempvalue:{
      deep:true,
      handler:function(newval,oldval){        
        for (var pname in newval){          
          var arr=pname.split('.')
          var root=this.props
          for (var i=0;i<arr.length;i++){            
            if(i==arr.length-1){
              //叶子节点
              this.$set(root,arr[i],newval[pname])
            }
            else{
              //中间节点
              if(root[arr[i]]==undefined){
                this.$set(root,arr[i],{})
              }
            }
            root=root[arr[i]]
          }
        }
        console.log(this.props);
        // todo 这里emit有问题
        // this.$emit('input', this.props)
      }
    }
  },  
  props:{
    id:Number,
    value:{
      default:""
    }
  },
  data(){
    return {
      triggers:['blur','change'],      
      validatorTypes:[
        'number','date','array'
      ],
      testValue:0,
      drawer:false,
      tempvalue:{        
      },
      tagName:"",
      propconfig:[],
      props:{}
    }
  }
}
</script>

<style>

</style>